import { Outlet } from 'react-router-dom'
import { Tabbar } from 'react-vant'
import { OtherPay , WapHomeO, VideoO, Contact  } from '@react-vant/icons'
import { Sticky } from 'react-vant';
import { useNavigate, useLocation } from 'react-router-dom';
import { useState } from 'react';
function App() {
  const navigate = useNavigate();
  const loc = useLocation();
  const [pathArr] = useState(['/', '/index', '/my', '/set']); //在数组中添加路径可以显示底部的导航，底部导航是全局的样式

  const onTabbar = (e) => {
    switch (e) {
      case 0:
        navigate('/');
        return;
      case 1:
        navigate('/index');
        return;
      case 2:
        navigate('/my');
        return;
      case 3:
        navigate('/set');
        return;
    }
  }

  return (
    <>
      <Outlet></Outlet>


      {
        pathArr.includes(loc.pathname) && <Sticky position="bottom">
          <Tabbar onChange={onTabbar}>
            <Tabbar.Item icon={<WapHomeO  />}>首页</Tabbar.Item>
            <Tabbar.Item icon={<VideoO  />}>视频</Tabbar.Item>
            <Tabbar.Item icon={<OtherPay  />}>消息</Tabbar.Item>
            <Tabbar.Item icon={<Contact  />}>未登录</Tabbar.Item>
          </Tabbar>
        </Sticky>
      }
    </>
  )
}

export default App
